<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="125px"
    >
      <el-form-item label="字典类型code" prop="keyCode">
        <el-input
          v-model="dataForm.keyCode"
          placeholder="请输入字典类型code"
        ></el-input>
      </el-form-item>
      <el-form-item label="字典类型名称" prop="name">
        <el-input
          v-model="dataForm.name"
          placeholder="请输入字典类型名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="上级菜单" prop="parentName">
        <el-popover
          ref="menuListPopover"
          placement="bottom-start"
          trigger="click"
        >
          <el-tree
            :data="menuList"
            :props="menuListTreeProps"
            node-key="keyCode"
            ref="menuListTree"
            @current-change="menuListTreeCurrentChangeHandle"
            :default-expand-all="false"
            :highlight-current="true"
            :expand-on-click-node="false"
            class="tree"
          >
          </el-tree>
        </el-popover>
        <el-input
          v-model="dataForm.parentName"
          v-popover:menuListPopover
          :readonly="true"
          placeholder="点击选择上级菜单"
          class="menu-list__input"
        ></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="dataForm.description" placeholder="描述"></el-input>
      </el-form-item>
      <el-form-item label="排序号" prop="sort">
        <el-input-number
          v-model="dataForm.sort"
          controls-position="right"
          :min="0"
          label="排序号"
        ></el-input-number>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {treeDataTranslate} from "@/utils";

export default {
  data() {
    return {
      visible: false,
      dataForm: {
        id: 0,
        name: "",
        keyCode: "",
        parentKeyCode: "",
        parentName: "",
        description: "",
        sort: "",
      },
      menuList: [],
      menuListTreeProps: {
        label: "name",
        children: "children",
      },
      dataRule: {
        name: [
          {required: true, message: "字典类型名称不能为空", trigger: "blur"},
        ],
        keyCode: [
          {required: true, message: "字典类型code不能为空", trigger: "blur"},
        ],
      },
    };
  },
  methods: {
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        this.menuList = [];
        this.$http({
          url: this.$http.adornUrl("/api-trading/system/sysDirectoryType/allList"),
          method: "get",
          params: this.$http.adornParams(),
        })
          .then(({data}) => {
            this.menuList = treeDataTranslate(
              data.data,
              "keyCode",
              "parentKeyCode"
            );
          })
          .then(() => {
            if (this.dataForm.id) {
              this.$http({
                url: this.$http.adornUrl(
                  `/api-trading/system/sysDirectoryType/info/${this.dataForm.id}`
                ),
                method: "get",
                params: this.$http.adornParams(),
              }).then(({data}) => {
                if (data && data.code === 0) {
                  this.dataForm.name = data.data.name;
                  this.dataForm.keyCode = data.data.keyCode;
                  this.dataForm.parentKeyCode = data.data.parentKeyCode;
                  this.dataForm.description = data.data.description;
                  this.dataForm.sort = data.data.sort;
                  this.menuListTreeSetCurrentNode()
                }
              });
            }
          });
      });
    },
    // 菜单树选中
    menuListTreeCurrentChangeHandle(data, node) {
      this.dataForm.parentKeyCode = data.keyCode;
      this.dataForm.parentName = data.name;
    },
    // 菜单树设置当前选中节点
    menuListTreeSetCurrentNode() {
      this.$refs.menuListTree.setCurrentKey(this.dataForm.parentKeyCode);
      this.dataForm.parentName = (this.$refs.menuListTree.getCurrentNode() ||
        {})["name"];
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/api-trading/system/sysDirectoryType/${
                !this.dataForm.id ? "save" : "update"
              }`
            ),
            method: "post",
            data: this.$http.adornData({
              id: this.dataForm.id || undefined,
              name: this.dataForm.name,
              keyCode: this.dataForm.keyCode,
              parentKeyCode: this.dataForm.parentKeyCode,
              description: this.dataForm.description,
              sort: this.dataForm.sort,
            }),
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
  },
};
</script>
<style lang="scss">
.tree {
  max-height: 250px;
  overflow-y: auto;
}

/*滚动条整体部分*/
.tree::-webkit-scrollbar {
  width: 6px;
  background-color: rgba(217, 217, 217, 0.3);
}

/*滚动条里面的上下移动方块*/
.tree::-webkit-scrollbar-thumb {
  background-color: rgba(217, 217, 217, 0.3);
  border-radius: 6px;
}

/*滚动条的轨道（里面装有Thumb）*/
.tree::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(217, 217, 217, 0.3);
  background-color: #fff;
}
</style>
